<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02_签名</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: gray;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background:white;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="500" height="500"></canvas>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			
			var canvas =document.getElementById("test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
			}
			
			/**
			 * cavans 的鼠标点下事件
			 * @param {Object} ev
			 */
			canvas.onmousedown=function(ev){
				// 兼容 IE
				ev = ev || window.event;
				// 设置 canvas 的捕获事件
				if(canvas.setCapture){
					canvas.setCapture();
				}
				
				// 每次点击清除上次的路径信息
				ctx.beginPath();
				
				// 画笔移动到鼠标点击的位置
				ctx.moveTo(ev.clientX -canvas.offsetLeft,ev.clientY -canvas.offsetTop);
				
				// 监听鼠标移动事件
				document.onmousemove=function(ev){
					// 保存之前的样式信息
					ctx.save();
					// 设置当前的饿样式信息
					ctx.strokeStyle="pink";//线条颜色
					ctx.lineCap="round";//线段末端的属性
					ctx.lineJoin="round";//链接处的处理
					ctx.lineWidth=10;//线宽 
					// 获得兼容性事件对象
					ev = ev || event;
					
					// 移动到鼠标当前位置
					ctx.lineTo(ev.clientX -canvas.offsetLeft,ev.clientY -canvas.offsetTop);
					
					// 绘制线条
					ctx.stroke();
					
					// 当前样式出栈
					ctx.restore();
				}
				document.onmouseup=function(){
					document.onmousemove=document.onmouseup=null;
					if(document.releaseCapture){
						document.releaseCapture();
					}
				}
				return false;
			}
			
		}
		
	</script>
</html>
